<script lang="ts" setup>
// 大屏中间-圆环图
import RingChart from './person/ringChart.vue'
// 大屏中间-柱状图
import BarChart from './person/barChart.vue'
// 大屏右侧-双柱柱状图
import DoubleBarChart from './person/doubleBarChart.vue'
// 大屏右侧-雷达图
import RadarChart from './person/radarChart.vue'
// 大屏右侧-饼图
import PieChart from './person/pieChart.vue'
// 大屏中间-折柱混合图
import LineBarChart from './person/lineBarChart.vue'
// 大屏左侧-象形图
import PictographChart from './person/pictographChart.vue'
import { onMounted, reactive, ref } from 'vue'
import { fetchGetTotalNum } from '@/api/screen/home'
import { fetchGetPersonRank } from '@/api/screen/person'
import { fetchGetCollegeList } from "@/api/public";



onMounted(() => {
  // 获取学校总人数
  getTotalNum()
  // 获取社团人数排行榜
  getSocietyRank()
  // 获取学院数据
  getCollegeData()
})

let totalNumber = reactive({
  person: null,
  society: null,
  manage: null,
})
// 获取学校总人数
const getTotalNum = async () => {
  const res = await fetchGetTotalNum()
  totalNumber.person = res.data.person
  totalNumber.society = res.data.society
  totalNumber.manage = res.data.manage
}

let societyRank = reactive([])
let societyTotalNumber = 0
let societyPlanNumber = 0
// 获取社团人数排行榜
const getSocietyRank = async () => {
  const res = await fetchGetPersonRank()
  societyRank = res.data
  res.data.forEach((item: { planNumber: number; nowNumber: number }) => {
    societyPlanNumber+=item.planNumber
    societyTotalNumber+=item.nowNumber
  })
}
let collegeData = reactive([])
// 获取学院数据
const getCollegeData = async () => {
  const res = await fetchGetCollegeList()
  collegeData = res.data.data
}
</script>

<template>
  <div class="screen-content">
    <!-- 大屏左侧 -->
    <div class="content-left  content-item">
      <!-- 上半部分 -->
      <div class="box-top chart-box">
        <div class="chart-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>人员概览</span>
        </div>
        <div class="list-content">
          <!-- 人数概览 -->
          <div class="list-1">
            <div class="list-item">
              <div class="title">总人数</div>
              <div class="count">{{ totalNumber.person }}</div>
            </div>
            <div class="list-item">
              <div class="title">社团个数</div>
              <div class="count">{{ totalNumber.society }}</div>
            </div>
            <div class="list-item">
              <div class="title">在职干部</div>
              <div class="count">{{ totalNumber.manage }}</div>
            </div>
          </div>

          <div class="list-2">
            <div class="header">
              <div>会员人数排行榜</div>
            </div>
            <div class="content-list">
              <div class="list-item" v-for="(item, index) in societyRank" :key="index">
                <div class="item-index">{{ index + 1 }}</div>
                <div class="society-name">{{ item.name }}</div>
                <div class="person-num">社团当前人数：{{ item.nowNumber }} 人</div>
              </div>
            </div>
          </div>

          <!-- 活跃人数排行榜  -->

        </div>
      </div>
      <!-- 下半部分 -->
      <div class="box-bottom chart-box">
        <div class="chart-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>学生干部分布</span>
        </div>
        <div class="chart-content">
          <PictographChart :college-data="collegeData" />
        </div>
      </div>
    </div>

    <!-- 大屏中间 -->
    <div class="content-center content-item">
      <!-- 上半部分 -->
      <div class="box-top chart-box">
        <div class="chart-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>本年度人员数据</span>
        </div>
        <div class="chart-content">
          <div class="center-content1">
            <div class="person-number">
              <div class="name">计划招新</div>                                            
              <div class="number">{{ societyPlanNumber }} 人</div>
            </div>
            <div class="person-number">
              <div class="name">已招人数</div>
              <div class="number">{{ societyTotalNumber }} 人</div>
            </div>
          </div>
          <div class="center-content2">
            <div class="center-chart-2">
              <div class="header">
                <div>各社团人数</div>
              </div>
              <div class="center-chart-box">
                <BarChart />
              </div>
            </div>
          </div>
          <div class="center-content3">
            <div class="center-chart-3">
              <div class="header">
                <div>社团发展规模概览</div>
              </div>
              <div class="center-chart-box">
                <RingChart />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 下半部分 -->
      <div class="box-bottom chart-box">
        <div class="chart-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>专业入团率</span>
        </div>
        <div class="chart-content">
          <LineBarChart />
        </div>
      </div>
    </div>

    <!-- 大屏右侧 -->
    <div class="content-right content-item">
      <div class="chart-1 chart-box">
        <div class="chart-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>男女比例</span>
        </div>
        <div class="chart-content">
          <PieChart />
        </div>
      </div>
      <div class="chart-2 chart-box">
        <div class="chart-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>各类型社团分布</span>
        </div>
        <div class="chart-content">
          <RadarChart />
        </div>
      </div>
      <div class="chart-3 chart-box">
        <div class="chart-title">
          <svg-icon icon-class="screen-ring" class="icon" />
          <span>各学院人数</span>
        </div>
        <div class="chart-content">
          <DoubleBarChart />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.screen-content {
  display: grid;
  grid-template-columns: 3.5fr 5.5fr 3.5fr;
  min-height: 0;

  .content-item {
    display: grid;
    padding: 1rem;
  }

  .content-left,
  .content-center {
    grid-template-rows: 3fr 1fr;
    gap: 2rem;
    min-height: 0;
  }


  .content-left {
    .list-content {
      display: grid;
      gap: 2rem;
      grid-template-rows: 1fr 5fr;
      padding: 2rem;

      .list-1 {
        background-color: #0a214737;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;

        .list-item {
          display: grid;
          grid-template-rows: 5rem auto;
          background-color: #081032;
          border: 0.1rem solid #3976A0;

          .title {
            background-color: #0A3256;
            color: #fff;
            text-align: center;
            font-size: 2rem;
            height: 5rem;
            line-height: 5rem;
          }

          .count {
            text-align: center;
            place-self: center;
            line-height: 100%;
            font-size: 2.5rem;
            color: #39B6F5;
            font-weight: 700;
          }
        }
      }

      .list-2 {
        display: grid;
        grid-template-rows: 4rem auto;

        .header {
          padding: 1rem 0;

          div {
            height: 1.6rem;
            line-height: 1.6rem;
            color: #28FFFE;
            font-size: 1.6rem;
            font-weight: 700;
            border-left: 0.2rem solid #28FFFE;
            padding: 0 1.5rem;
          }
        }

        .content-list {
          .list-item {
            display: grid;
            grid-template-columns: 1fr 3fr 5fr;
            color: #fff;
            padding: 1.2rem 2rem;

            .item-index {
              width: 2rem;
              height: 2rem;
              background-color: #1E85E3;
              text-align: center;
              line-height: 2rem;
              font-weight: 700;
              border-radius: 100%;
              align-self: center;
            }

            .person-num {
              background-color: #15436D;
              padding: 0 1rem;
            }

            &:nth-child(1) {
              .item-index {
                background-color: #EC3E3F;
              }
            }

            &:nth-child(2) {
              .item-index {
                background-color: #F79106;
              }
            }

            &:nth-child(3) {
              .item-index {
                background-color: #E0C921;
              }
            }
          }
        }
      }

      .list-3 {
        display: grid;
        grid-template-rows: 4rem auto;

        .header {
          padding: 1rem 0;

          div {
            height: 1.6rem;
            line-height: 1.6rem;
            color: #28FFFE;
            font-size: 1.6rem;
            font-weight: 700;
            border-left: 0.2rem solid #28FFFE;
            padding: 0 1.5rem;
          }
        }

        .content-list {
          .list-item {
            display: grid;
            grid-template-columns: 1fr 3fr 5fr;
            color: #fff;
            padding: 0.5rem 2rem;

            .item-index {
              width: 2rem;
              height: 2rem;
              background-color: #1E85E3;
              text-align: center;
              line-height: 2rem;
              font-weight: 700;
              border-radius: 100%;
              align-self: center;
            }

            .person-num {
              background-color: #15436D;
              padding: 0 1rem;
            }

            &:nth-child(1) {
              .item-index {
                background-color: #EC3E3F;
              }
            }

            &:nth-child(2) {
              .item-index {
                background-color: #F79106;
              }
            }

            &:nth-child(3) {
              .item-index {
                background-color: #E0C921;
              }
            }
          }
        }
      }
    }
  }

  .content-center {
    min-height: 0;

    .box-top {
      .chart-content {
        display: grid;
        gap: 2rem;
        grid-template-rows: 1fr 4.8fr 4.2fr;
        padding: 2rem;

        .center-content1 {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 2rem;

          .person-number {
            background-color: #0053AE;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            font-size: 2.5rem;

            .name {
              place-self: center;
              color: #fff;

            }

            .number {
              justify-self: left;
              align-self: center;
              color: #FBFF11;
            }
          }
        }

        .center-content2 {

          .center-chart-2 {
            display: grid;
            grid-template-rows: 4rem auto;
            height: 100%;

            .header {
              padding: 1rem 0;

              div {
                height: 1.6rem;
                line-height: 1.6rem;
                color: #28FFFE;
                font-size: 1.6rem;
                font-weight: 700;
                border-left: 0.2rem solid #28FFFE;
                padding: 0 1.5rem;
              }
            }

            .center-chart-box {}

          }
        }

        .center-content3 {

          .center-chart-3 {
            display: grid;
            grid-template-rows: 4rem auto;
            height: 100%;

            .header {
              padding: 1rem 0;

              div {
                height: 1.6rem;
                line-height: 1.6rem;
                color: #28FFFE;
                font-size: 1.6rem;
                font-weight: 700;
                border-left: 0.2rem solid #28FFFE;
                padding: 0 1.5rem;
              }
            }

            .center-chart-box {}

          }
        }
      }
    }

  }

  .content-right {
    grid-template-rows: 1fr 1fr 1.2fr;
    gap: 2rem;

    .chart-1 {}

    .chart-2 {}

    .chart-3 {}
  }

  .chart-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3rem auto;
    border: 0.1rem solid #28FFFE;
    background-color: rgba(9, 13, 24, 0.9);

    .chart-title {
      display: flex;
      align-items: center;
      padding: 0 0.5rem;
      color: #28FFFE;
      font-size: 1.8rem;

      span {
        font-weight: 700;
        margin-left: 0.5rem;
      }
    }
  }
}
</style>
